<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" component="$model/UI2/system/components/justep/window/window" data-bind="component:{name:'$model/UI2/system/components/justep/window/window'}" __justepbasexid__="__baseID__" components="$model/UI2/system/components/justep/panel/panel,$model/UI2/system/components/justep/panel/child,$model/UI2/system/components/justep/windowDialog/windowDialog,$model/UI2/system/components/justep/button/checkbox,$model/UI2/system/components/justep/model/model,$model/UI2/system/components/justep/window/window,$model/UI2/system/components/justep/select/checkboxGroup,$model/UI2/system/components/justep/titleBar/titleBar,$model/UI2/system/components/justep/data/data,$model/UI2/system/components/justep/button/button,$model/UI2/system/components/justep/output/output,">  
  <div xmlns="" component="$model/UI2/system/components/justep/model/model" xid="model1" style="display:none" data-bind="component:{name:'$model/UI2/system/components/justep/model/model'}"/>  
  <div xmlns="" component="$model/UI2/system/components/justep/panel/panel" class="x-panel x-full" xid="panel1" data-bind="component:{name:'$model/UI2/system/components/justep/panel/panel'}"> 
    <div class="x-panel-top" xid="top1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div component="$model/UI2/system/components/justep/titleBar/titleBar" class="x-titlebar" xid="titleBar1" data-bind="component:{name:'$model/UI2/system/components/justep/titleBar/titleBar'}" data-config="{&quot;title&quot;:&quot;checkbox&quot;}"> 
        <div class="x-titlebar-left" xid="div1" id="te"> 
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link btn-icon-left" xid="button20" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:returnMain" data-config="{&quot;icon&quot;:&quot;icon-chevron-left&quot;}"> 
            <i xid="i11" class="icon-chevron-left"/>  
            <span xid="span11"/> 
          </a> 
        </div>  
        <div class="x-titlebar-title" xid="div2">checkbox</div>  
        <div class="x-titlebar-right " xid="div3"> 
          <div class="empty"/> 
        </div> 
      </div> 
    </div>  
    <div class="x-panel-content" xid="content2" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">checkbox style</h3>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button45" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:isVisible" data-events="onClick:showStyleSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
        <i xid="i28"/>  
        <span xid="span28">源码</span> 
      </a>  
      <div xid="checkboxStyle"> 
        <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox" xid="checkbox7" name="agree" label="default" value="agree" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:&quot;default&quot;,&quot;name&quot;:&quot;agree&quot;,&quot;value&quot;:&quot;agree&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/checkbox'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox" name="agree" value="agree"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml">default</label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox x-checkbox-sm" xid="checkbox2" label="x-checkbox-sm" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:&quot;x-checkbox-sm&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/checkbox'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml">x-checkbox-sm</label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox x-checkbox-xs" xid="checkbox3" label="x-checkbox-xs" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:&quot;x-checkbox-xs&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/checkbox'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml">x-checkbox-xs</label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox x-checkbox-lg" xid="checkbox4" label="x-checkbox-lg" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;label&quot;:&quot;x-checkbox-lg&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/checkbox'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml">x-checkbox-lg</label> 
        </span>  
        <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox" xid="checkbox1" label="disabled" disabled="true" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;label&quot;:&quot;disabled&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/checkbox'}"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml">disabled</label> 
        </span> 
      </div>  
      <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">checkbox event
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button50" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:showJsSource" data-config="{&quot;label&quot;:&quot;js&quot;}"> 
          <i xid="i51"/>  
          <span xid="span50">js</span> 
        </a>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button47" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:isVisible" data-events="onClick:showEventSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
          <i xid="i50"/>  
          <span xid="span49">源码</span> 
        </a> 
      </h3>  
      <div xid="checkboxEvent"> 
        <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox " xid="checkboxVal" label="agree" checkedValue="1" data-config="{&quot;checked&quot;:false,&quot;checkedValue&quot;:&quot;1&quot;,&quot;disabled&quot;:false,&quot;label&quot;:&quot;agree&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/checkbox'}" data-events="onChange:checkboxChange"> 
          <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox"></input>  
          <label xmlns:xhtml="http://www.w3.org/1999/xhtml">agree</label> 
        </span>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="button1" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:controlCheckbox" data-config="{&quot;label&quot;:&quot;通过其他组件控制checkbox选中状态&quot;}"> 
          <i xid="i1"/>  
          <span xid="span1">通过其他组件控制checkbox选中状态</span> 
        </a> 
      </div>  
      <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">checkboxGroup</h3>  
      <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button51" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:isVisible" data-events="onClick:showCheckboxGroupSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
        <i xid="i52"/>  
        <span xid="span51">源码</span> 
      </a>  
      <p>1、bind-ref感知data，继承data被感知部分的规则：如果该部分只读，则整个checkboxGroup只读</p>  
      <p>2、itemset感知data，继承data被感知部分的规则：如果该部分只读，只有对应选项只读</p>  
      <span component="$model/UI2/system/components/justep/select/checkboxGroup" xid="showCheckboxGroup" class="x-checkbox-group" data-bind="component:{ref:data2.ref('fValue'),name:'$model/UI2/system/components/justep/select/checkboxGroup'},foreach:{data:data1.datas,afterRender:$model.comp($element)['_doUpdate'].bind($model.comp($element))}"> 
        <span xmlns:xhtml="http://www.w3.org/1999/xhtml" component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox" data-config="{&quot;checked&quot;:false,&quot;disabled&quot;:false}" data-bind="component:{name:'$model/UI2/system/components/justep/button/checkbox',value:ref('fName'),label:ref('fName')}">  
          <input type="checkbox"/>  
          <label/> 
        </span> 
      </span>  
      <div component="$model/UI2/system/components/justep/output/output" class="x-output" xid="showValue" data-bind="component:{name:'$model/UI2/system/components/justep/output/output'}"/> 
    </div>  
    <div id="aler"/> 
  </div>  
  <span xmlns="" component="$model/UI2/system/components/justep/windowDialog/windowDialog" xid="windowDialog" data-bind="component:{name:'$model/UI2/system/components/justep/windowDialog/windowDialog'}" data-config="{&quot;src&quot;:&quot;$model/UI2/system/components/justep/common/demo/dialog.w&quot;}"> 
    <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog-overlay"></div>  
    <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog">  
      <div class="x-dialog-title"> 
        <button class="close"> 
          <span>×</span> 
        </button>  
        <div class="x-dialog-title-text"/> 
      </div>  
      <div class="x-dialog-body"/> 
    </div> 
  </span> 
</div>
